<template>
  <Card title="库存存量趋势  (单位 :万册)" :loading="loading">
    <Skeleton active :paragraph="{ rows: 5 }" :loading="loading">
      <div ref="chartRef" class="h-118 w-full"></div>
    </Skeleton>
  </Card>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { Skeleton, Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import type { EChartsOption } from 'echarts';
  import * as echarts from 'echarts/core';
  import { monthlyCount } from '/@/api/sys/login';



  const loading = ref(true);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async () => {
    const res = await monthlyCount();
    console.log(res);
    // map 对象转换成数组，只保留 value
    const data = Object.values(res);
    // 取data数组中的最大值
    const max = Math.max(...data);
    const options: EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      xAxis: {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      yAxis: [
        {
          type: 'value',
          max: max,
          // splitNumber: 4,
          axisTick: {
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
            },
          },
        },
      ],
      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
      series: [
        {
          data: data,
          type: 'bar',
          barMaxWidth: 20,
          // 渐变色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#008acd',
              },
              {
                offset: 1,
                color: '#00e8c6',
              },
            ]),
          },
        },
      ],
    };
    // 此处写后端 API 获取 options 数据
    setOptions(options);
    loading.value = false;
  });
</script>
